<template>
    <div>
      <el-upload
    class="upload-demo"
    action
    accep=".xlsx,.xls"
    :on-change='handle'
    :auto-upload="false"
  >
    <template #trigger>
      <el-button type="primary">导入</el-button>
    </template>

    <el-button class="ml-3" type="success" @click="submitUpload">
     导出
    </el-button>
  </el-upload>
  <div class="dc" >
      <p>导出为excel</p>
      <el-button class="ml-3" type="success" @click="dcl">
     导出
    </el-button>
  </div>
    <el-table :data="data.user" style="width: 100%">
    <el-table-column fixed type='index' label="#"  />
    <el-table-column prop="username" label="姓名" />
    <el-table-column prop="mobile" label="联系方式"  /> 
    <el-table-column  label="头像"  >
        <template #default="scope">
          <img :src="scope.row.avatar" style="width:60px;">
        </template>
    </el-table-column>
    <el-table-column prop="address" label="角色">
        <template #default="scope">
            <el-tag v-for="(item, index) in scope.row.role" :key="index">{{ item.title }}</el-tag>
         </template>
    </el-table-column>
    <el-table-column  label="开通时间"  >
      <template #default="scope">
           {{ $filters.currencyUSD(scope.row.openTime) }}
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" >
      <template #default>
        <el-button type="primary" size="small">查看</el-button
        >
        <el-button type="info" size="small">角色</el-button>
        <el-button type="danger" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="demo-pagination-block">
    <div class="demonstration">All combined</div>
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      :total="data.total"
      @current-change="currentChange"
      @next-click="next" @prev-click="prev"
    />
  </div>

  <table style='width:70%'>
    <tr>
      <td>姓名</td>
      <td>手机号</td>
    </tr>
     <tr v-for="(item,index) in data.druser" :key="index">
       <td>{{item.name}}</td>
       <td>{{item.phone}}</td>
     </tr>
  </table>

    </div>
</template>
<script setup>
import { yguser,getImports } from "@/http/api.js";
import { onMounted, reactive, ref } from "vue";
import { readFile,character } from "../main.js";

import * as xlsx from "xlsx";
const small = ref(false);
const background = ref(false);
const disabled = ref(false);

const data = reactive({
  form: {
    page: 1,
    size: 6
  },
  total: "",
  user: [],
  druser:[],
  isshow:false
});

onMounted(() => {
  console.log(character)
  userList({ page: data.form.page, size: data.form.size });
});

const currentChange = val => {
  data.form.page = val;
  userList({ page: data.form.page, size: 6 });
};
//导入
 const handle=async (ev)=>{
   let file=ev.raw;
   if (!file) return;
   let data1=await readFile(file)
   let workbook=xlsx.read(data1,{type:'binary'})
   let worksheet=workbook.Sheets[workbook.SheetNames[0]];
   data1=xlsx.utils.sheet_to_json(worksheet)
   let arr=[]
   data1.forEach(item=>{
     let obj={}
     for(let key in character){
       if(!character.hasOwnProperty(key)) break;
       let v=character[key]
      let text=v.text;
      let type=v.type;
       v=item[ text] || "";
       type==="string"?(data.v=String(data.v)):null;
       type==="number"?(data.v=Number(data.v)):null;
       obj[key]=v
     }
     arr.push(obj)
     data.druser=arr
   })
    console.log(arr)
   console.log(data.druser)
}

//导出
const submitUpload=async()=>{
   let n=0;
   if(n>data.user.length-1){

     return
   }
   let body=data.user[n]
   let result=await getImports(body)
   console.log(result)
   data.isshow=true
   n++;
}

const dcl=()=>{
  let arr=data.user.map(item=>{
      return{
        编号:item.id,
        姓名:item.username,
        电话:item.mobile
      }
  })
  let sheet=xlsx.utils.json_to_sheet(arr)
  let book=xlsx.utils.book_new();
  xlsx.utils.book_append_sheet(book,sheet,'sheet1');
  xlsx.writeFile(book,`user${new Date().getTime()}.xls`)
  console.log(arr)
}



const userList=async()=>{
  let res = await yguser(data.form);
  console.log(res);
  data.user = res.data.list;
  data.total = res.data.total;
};

</script>

<style lang='scss' scoped >
.dc{
  width: 100px;
  height: 100px;
  position: relative;

  left: 450px;
}
</style>
